<@main.page title="地图">
<style>
.companyList{margin:0px;padding:0px;list-style:none}
.companyList li{ margin-bottom:8px;border-bottom:1px solid #ccc; }

.gisMenuItem{ float:right;margin-right:23px; }
</style>
<link href="http://127.0.0.1:8400/static/onav.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://127.0.0.1:8400/api/?"></script>
    <script src="http://127.0.0.1:8400/static/onav.js" type="text/javascript"></script>
    <script>
    var companyJSON=[
                     {"companyId":"1","companyName":"青岛海晶化工集团有限公司","companyAddress":"山东省青岛市唐河路8号","companyCorporation":"王文权","companyPhone":"15210052964","companyCoordinate":"","X":"485312.5","Y":"3951451.5624046326","geometry":{"type":"Point","coordinates":["485312.5","3951451.5624046326"]}},
                     {"companyId":"2","companyName":"青岛钢铁有限责任公司","companyAddress":"山东省青岛市遵义路5号","companyCorporation":"王君庭","companyPhone":"0532-7071144","companyCoordinate":"","X":"478687.5","Y":"3941875","geometry":{"type":"Point","coordinates":["478687.5","3941875"]}},
                     {"companyId":"3","companyName":"青岛海力加化学新材料有限公司","companyAddress":"山东省青岛胶南市董家口临港产业","companyCorporation":"王君庭","companyPhone":"0532-67713200","companyCoordinate":"","X":"474625","Y":"3946375","geometry":{"type":"Point","coordinates":["474625","3946375"]}}
                     ];
        
    	var map=null;
    	$(document).ready(function(){
    		$('.page-breadcrumb').append($('#menuList').html());
    		
    		map=new LfmxMap('mapWrap',
    				{
	    			    lfmx: encodeURIComponent('GISMap.lfmx'),
	    	            zoomsliderControl: false,
	    	            zoomControl: false,
	    	            boxzoom: true,
	    	            dragging: true,
	    	            scrollWheelZoom: true,
	    	            zoomsliderControl: false,
	    	            zoomControl: false,
	    	            boxzoom: true,
	    	            dragging: true,
	    	            scrollWheelZoom: true 
    				});
    		$.getJSON('/yqyd/control/getCompany',function(data){
    			loadCompanyList(data);
        		loadCompanyMarker(data);
    		});
    	});
    
    	//load company list
    	function loadCompanyList(data){
    		var $box=$('.companyList').empty();
    		var temp=$('#companyListItem').html();
    		var arrHtml=[];
    		
    		$('#companyCount').html(data.length);
    		$.each(data,function(){
    			var t=temp;
    			t=t.replace('$companyLogo$','/yqyd/control/getImg?realPath='+this.companyLogo);
    			t=t.replace('$companyName$',this.companyName);
    			t=t.replace('$companyPhoto$','/yqyd/control/getImg?realPath='+this.companyPhoto);
    			t=t.replace('$companyAddress$',this.companyAddress);
    			t=t.replace('$companyCorporation$',this.companyCorporation);
    			t=t.replace('$companyPhone$',this.companyPhone);
    			t=t.replace('$companyId$',this.companyId);
    			t=t.replace('$companyCoordinate$',this.companyCoordinate);
    		
    			arrHtml.push(t);
    		});
    		$box.html(arrHtml.join(''));
    	}
    	
    	// load map Marker
    	function loadCompanyMarker(data){
    	   $.each(data,function(){
    		   var coordinate=this.companyCoordinate;
    		   
    		   if(!coordinate||coordinate.split(',').length<1){
    			   return ;
    		   }
    		   var xy=coordinate.split(',');
    		   
    		   var marker=new LMarker([parseFloat(xy[0]),parseFloat(xy[1])]);
    		   marker.draggable=true;
    		    marker.bindLabel(this.companyName, { noHide: true });
    	        marker.companyId = this.companyId;
    	        
    	        var t=$('#popupDetail').html();
    	        t=t.replace('$companyLogo$','/yqyd/control/getImg?realPath='+this.companyLogo);
    			t=t.replace('$companyName$',this.companyName);
    			t=t.replace('$companyPhoto$','/yqyd/control/getImg?realPath='+this.companyPhoto);
    			t=t.replace('$companyAddress$',this.companyAddress);
    			t=t.replace('$companyCorporation$',this.companyCorporation);
    			t=t.replace('$companyPhone$',this.companyPhone);
    			t=t.replace('$companyId$',this.companyId);
    			t=t.replace('$companyCoordinate$',this.companyCoordinate);
    	        
    	        marker.bindPopup(t, {
    	            minWidth: 300
    	        });
    		   
				marker.addTo(map);    		   
    	   });
    	}
    	
    	function ShowCompany(t){
    		var $li=$(t).closest('li');
    		var xy=$li.find('input[name=companyCoordinate]').val();
    		var companyId=$li.find('input[name=companyId]').val();
    		if(xy&&xy.split(',').length>1){
    			var arrXY=xy.split(',');
    			map.panToXY({x:parseFloat(arrXY[0]),y:parseFloat(arrXY[1])});
    			map.eachLayer(function(layer){ 
    				if(layer.companyId==companyId){
    					layer.openPopup();
    				}
    				});
    		}
    	}
    	
    	//marker map
    	function MarkerAddress(t){
    		var addmarker = new L.Draw.Marker(map);
    		addmarker._enabled = true;
    		addmarker.addHooks();
    		map.on('draw:created',function(e){ 
    			console.log(e); 
    			var type=e.layerType,layer=e.layer;    
    			if(type=='marker'){ 
    				
    				
    			}  })
    	}
    	
    </script>
    
    <script id="companyListItem" type="text/template">
		<li>
							<div style="font-size:14px;font-weight:800;"><img src="$companyLogo$" " style="width:70px;height:50px;" /><a onclick="ShowCompany(this);" href="javascript:void(0);" >$companyName$</a></div>
							<div>
							   <img src="$companyPhoto$" style="width:100px;height:70px;" class="pull-right" />
							  	<br /> 
							  	  $companyAddress$<br />
							  	 $companyCorporation$ <br />
							  	 $companyPhone$ <br />
							  	 <a href="javascript:void(0);" onclick="MarkerAddress(this);" ><i class="fa fa-map-marker"></i>标点</a>
								<input type="hidden" name="companyId" value="$companyId$" />
								<input type="hidden" name="companyCoordinate" value="$companyCoordinate$" />
							</div>
		</li>
	</script>
	<script id="menuList" type="text/template">
	  <li class="gisMenuItem" ><a href="zdwxyjz.html"><i class="fa fa-warning"></i> 重大危险源</a></li>
      <li class="active gisMenuItem"><a href="zdwxy-cq.html"><i class="fa fa-building"></i> 厂区</a></li>
      <li class="gisMenuItem"><a href="zdwxyjz-txwl.html"><i class="fa fa-signal"></i> 通讯网络</a></li>
      <li class="gisMenuItem"><a href="zdwxy-sxt.html"><i class="fa fa-video-camera"></i> 摄像头</a></li>
      <li class="gisMenuItem"><a href="zdwxy-gb.html"><i class="fa fa-volume-up"></i> 广播</a></li>
      <li class="gisMenuItem"><a href="zdwxy-qjzp.html"><i class="fa fa-photo"></i> 全景照片</a></li>
      <li class="gisMenuItem"><a href="zdwxy-rydw.html"><i class="fa fa-street-view"></i> 人员定位</a></li>
      <li class="gisMenuItem"><a href="zdwxy-jcyj.html"><i class="fa fa-bell"></i>监测预警</a></li>
      <li class="gisMenuItem"><a href="zdwxy-jcbj.html"><i class="fa fa-volume-off"></i> 监测报警</a></li>
      <li class="gisMenuItem"><a href="zdwxy-swqj.html"><i class="fa fa-cube"></i> 三维</a></li>
	</script>
	<script id="popupDetail" type="text/template">
		<div class="panel panel-default">
 			 <div class="panel-heading">
				 <div style="font-size:14px;font-weight:800;"><img src="$companyLogo$" " style="width:70px;height:50px;" /><a onclick="ShowCompany();" href="javascript:void(0);" >$companyName$</a></div>
             </div>
  			 <div class="panel-body">
				  <img src="$companyPhoto$" style="width:100px;height:70px;" class="pull-right" />
					<br /> 
					  $companyAddress$<br />
						 $companyCorporation$ <br />
					  	 $companyPhone$ <br />
				 	<input type="hidden" name="companyId" value="$companyId$" />
					<input type="hidden" name="companyCoordinate" value="$companyCoordinate$" />
  			 </div>
		</div>
	</script>
	
      <div class="row">
      	<div class="col-md-12" style="position:relative" >
      		<div id="mapWrap" style="height:100%;position:relative" ></div>
      		
      		<div class="portlet box red" style="width:300px;position:absolute;z-index:999998;top:0px;" >
				<div class="portlet-title">
					<div class="caption"><i class="fa fa-reorder"></i><span id="companyCount"></span>个结果</div>
					<div class="tools">
						<a class="collapse"></a>
						<a class="config" data-toggle="modal" ></a>
						<a class="reload" href="javascript:;"></a>
					</div>
				</div>
				<div class="portlet-body">
					<ul class="companyList">
					
					</ul>
				</div>
			</div>
      	</div>
      </div>
</@main.page>